<template>
  <div class="contact">
      <div class="contactmsg" @click="shouinput = !shouinput">
          <h1>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-new1-copy"></use>
              </svg>
              新人专享</h1>
          
          <p>免费领取现金红包</p>
          <h2>﹀</h2>
      </div>
      <transition
            name="custom-classes-transition"
            enter-active-class="animated fadeInUp"
            leave-active-class="animated fadeOutDown"
        >
        <div class="contactinput" v-show="shouinput">
                <el-input
                    placeholder="请输入您的姓名"
                    prefix-icon="el-icon-edit"
                    v-model="name">
                </el-input>
                <el-input
                    placeholder="请输入您的手机号"
                    prefix-icon="el-icon-phone"
                    v-model="phone">
                </el-input>
            <div class="submit" @click="subcontactus">提  交</div>
        </div>
     </transition>
  </div>
</template>
<script>
import api from '../static/js/api.js';
export default {
      data() {
        return {
          name:"",
          phone:"",
          shouinput:false
        }
      },
      methods:{
          subcontactus(){
            if(this.name == ""){
                this.$alert("请填写您的姓名！");
                return;
            }else if(!/^1\d{10}$/.test(this.phone)){
                this.$alert("请正确填写您手机号！");    
                return;                
            }else{
                  api.contactUs({phone:this.phone,name:this.name}).then((res)=>{
                            if(res.code == 1){
                                this.name = "";
                                this.phone = "";
                                this.shouinput = false;
                             this.$alert(res.msg)
                            }else{
                              this.$alert(res.msg)
                            }
              })
          }
      }
  }
}
</script>

<style scoped>
.contact{
    width: 180px;
    margin: 10px 0;
}
.contactmsg{
    cursor: pointer;
    height:124px;
    width: 180px;
    background: #b41d24;
    color: white;
    overflow: hidden;
}
.contactmsg h1{
    font-size: 24px;
    text-align: center;
    margin-top: 20px;
}
.contactmsg p {
    font-size: 14px;
    margin-top: 20px;
}
.contactmsg h2{
    margin-top: 20px;
    overflow: hidden;
    font-size: 26px;
}
.submit{
    margin-top: 10px;
    width: 180px;
    height: 46px;
    line-height: 46px;
    background: #cd9c54;
    font-size: 22px;
    color: white;
}
.contactinput{
    background: #fff;
    width: 180px;
    box-sizing: border-box;
}
.contactinput input{
    width: 140px;
    margin: 0 auto;
}
</style>
